<template>
  <div class="app-container container-width">
    <img style="width: 100%" src="../../../../src/assets/images/bg/bg_car.png" />
    <div>
      <div class="order-warp">
        <p flex="main:left" 
          style="display:flex; justify-content:flex-start;"
        >
          <span>确定订单</span
          ><span>请在{{overTime}}内完成支付，否则订单会被自动取消</span>
        </p>
        <div class="checkBox-warp">
          <!-- <el-checkbox-group v-model="checkedList"> -->
          <orderTable :checkOrder="true" :order="order"></orderTable>
        </div>
      </div>
    </div>
    <div class="order-commit" flex="main:justify cross:center"
      style="display:flex; justify-content: space-between; align-items:center; "
    >
      <p>
        共{{order.courseInfos.length}}件商品，商品金额￥{{order.orderAmountTotal.toFixed(2)}}，应付
        <span class="font-primary">￥{{order.orderAmountNeedPay.toFixed(2)}}</span
        >
      </p>
      <button class="btn" @click="commit">提交账单</button>
    </div>

    <pay v-model="payDlg" :orderId="order.orderId"></pay>
  
  </div>
</template>

<script lang="ts" >
import orderTable from "/@/components/order/orderTable.vue"
import pay from "/@/components/pay.vue";
import { orderCountTime } from "/@/utils/tools"
import { orderDetail } from "/@/api/order"
export default {
  components: {
    orderTable,
    pay
  },

  data() {
    return {
      payDlg:false,
      overTime:'00:00:00',
      order: {
        courseInfos:[],
        orderAmountTotal:0,
        orderAmountNeedPay:0
      },
      Interval:null
    };
  },
  mounted(){  
    this.getOrder()
  },
  destroyed(){
    clearInterval(this.Interval)
  },
  methods: {
    getOrder(){
      orderDetail({ orderId: this.$route.query.orderId }).then(res => {
          const {orderInfo} = res;
          this.order = orderInfo;
          this.getOverTime()
      }).catch(()=>{})
    },
      getOverTime(){
        if(!this.order.overTime)return
       this.Interval =  setInterval(()=>{
           this.overTime =  orderCountTime(this.order.overTime)
        },1000)
     
      }, 

    commit: function () {
        this.payDlg = true;
    //   this.$router.push({ name: "checkOrder" });
    },
  },
};
</script>

<style lang="scss" scoped>
.order-warp {
  position: relative;

  z-index: 2;
  margin: -110px 40px 0;
}
.checkBox-warp {
  padding: 20px;
  margin-top: 20px;
  font-size: 16px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 0 4px rgba(219, 124, 65, 0.1);
}

.el-col {
  height: 100%;
  text-align: center;
  padding: 4px;
}
.all {
  font-size: 16px;
  margin-left: 6px;
  line-height: 32px;
}
.order-commit {
  margin: 40px;
}
.btn {
  width: 180px;
  height: 50px;
  line-height: 50px;
  border-radius: 25px;
  color: #ffffff;
  background: #ff5f19;
  font-weight: bold;
  font-size: 24px;
}
</style>